<template>
  <el-table ref="" :data="tableData_view" border style="width: 100%" :height="tableHeight">
    <el-table-column v-for="(item, index) in tableColumn_view" v-show="item.label" :key="index" v-bind="item">
      <template slot-scope="scope">
        <el-input v-if="item.type === 'inputs'" v-model="scope.row[item.prop]" placeholder="请输入内容"></el-input>

        <span v-else-if="item.type === 'index'">
          {{ scope.$index + 1 }}
        </span>

        <template v-else-if="item.type === 'operation'">
          <template v-for="btn in item.btns">
            <!-- <el-popconfirm
              class="el-popconfirm-btn"
              title="确定要删除这条记录？"
              v-if="btn.key === 'delete'"
              :key="btn.key"
              v-show="btn.visible(scope.row)"
              @onConfirm="handleBtnClick(btn.key, scope.row, scope.$index)"
            >
              <el-button slot="reference" :disabled="btn.disabled(scope.row)" v-bind="btn">{{ btn.label }}</el-button>
            </el-popconfirm> -->
            <!-- v-else -->
            <!-- v-show="btn.visible(scope.row)"
              :disabled="btn.disabled(scope.row)" -->
            <el-button
              :key="btn.key"
              v-bind="btn"
              @click.stop="handleBtnClick(btn.key, scope.row, scope.$index)"
              :style="{ color: btnColor(item, btn, scope.row) }"
              >{{ btnName(item, btn, scope.row) }}</el-button
            >
          </template>
        </template>
        <span v-else>
          {{ scope.row[item.prop] }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';

export default {
  props: {
    // 表格高度
    tableHeight: {
      type: Number,
      default: 0,
    },
    // 表格渲染数据
    tableData: {
      type: Array,
      default: () => [],
    },
    tableColumn: {
      type: Array,
      default: () => [],
    },
    // 需要编辑的列的集合
    tableInputs: {
      type: Array,
      default: () => [],
    },
    // 是否需要表格编辑
    isTableInput: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableColumn_view: [],
    };
  },
  computed: {
    tableData_view() {
      const arr = _.cloneDeep(this.tableData);
      arr.forEach(item => {
        Object.keys(item).forEach(key => {
          if (['date', 'time'].includes(key)) {
            item[`${key}_view`] = moment(item[key]).format('YYYY-MM-DD hh:mm:ss');
          }
        });
      });
      arr.shift();
      return arr;
    },
  },
  created() {
    this.init();
  },
  methods: {
    handleBtnClick(key, row, rowIndex) {
      this.$emit('handleBtnClick', key, row, rowIndex);
    },
    init() {
      this.tableColumn_view = [];
      if (this.isTableInput) {
        this.tableColumn_view = this.tableColumn;
      }
      if (!this.tableData.length) return;
      Object.keys(this.tableData[0]).forEach(key => {
        this.tableColumn_view.push({
          label: this.tableData[0][key],
          prop: key,
          type: this.tableInputs.includes(key) ? 'inputs' : 'false',
        });
      });
    },
    btnName(curColConfig, btn, row) {
      if (curColConfig.filter) {
        if (![undefined, null].includes(row[curColConfig.prop])) {
          return curColConfig.filter[row[curColConfig.prop]];
        } else {
          return curColConfig.filter['default'];
        }
      } else {
        return btn.label;
      }
    },
    btnColor(curColConfig, btn, row) {
      if (curColConfig.colorFilter) {
        if (![undefined, null].includes(row[curColConfig.prop])) {
          return curColConfig.colorFilter[row[curColConfig.prop]];
        } else {
          return curColConfig.colorFilter['default'];
        }
      } else {
        return '#46a6ff';
      }
    },
  },
};
</script>

<style lang="scss"></style>
